<template>
	<view class="content">
		<view class="addr-box mb20">
			<view class="addr-content">
				<view class="addr-icon"><image src="../../../static/icons/jewel/order_addr.png"></image></view>
				<view class="addr-list">
					<view class="addr-nickname">{{orderData.realname}} {{orderData.mobile}}</view>
					<view class="addr-info">收货地址：{{addressData.province_text+addressData.city_text+addressData.zone_text+addressData.address}}</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="good-box mb20">
			<view class="common" v-if="orderData.seller_id != 0">
				<view class="com-name">店铺名：{{shop_info.shop_name}}</view>
				<view class="com-contact">
					<view class="contact" @tap="makePhoneCall"><image src="../../../static/icons/jewel/contact.png"></image>联系商家({{shop_info.mobile}})</view>
				</view>
			</view>
			<view class="common" v-else>
				<view class="com-name">广东恒朗</view>
				<view class="com-contact">
					<!-- <button open-type="contact" class="contact">
						<image src="../../../static/icons/jewel/contact.png"></image>
						联系商家
					</button> -->
				</view>
			</view>
			<!--珠宝-->
			<view class="good">
				<view class="lease content-box">
					<view class="lease-img" @tap="goods_detail(orderData.goods_id)"><image :src="orderData.goods_img" mode="aspectFit"></image></view>
					<view>
						<view class="lease-info">
							<view>
								<view class="lease-title f-two-ellipsis" @tap="goods_detail(orderData.goods_id)">{{orderData.goods_name}}</view>
								<view class="lease-attr font-color-hs">{{orderData.item_names}}</view>
							</view>
							<view class="lease-price">
								<view class="lease-now">¥{{orderData.shop_price}}</view>
								<view class="lease-num font-color-hs">x{{orderData.buy_num}}</view>
							</view>
						</view>
						<view class="lease-btns">
							<view class="btn" v-if="orderData.pay_status == 1 && orderData.order_state >=2 && orderData.order_state != 7 && orderData.order_state != 8 && orderData.is_refund && orderData.seller_id == 0" @tap="apply(orderData.id)">申请享退</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		<view class="cj_cont mb20" v-if="diff_list.length != 0">
			<view class="cj_title" @tap="toggle">补差价<arrow color="#D71311" size="40" :direction="direction?'top':'bottom'"></arrow></view>
			<view class="list" v-if="direction">
				<view class="nav">
					<text>差价金额</text><text>类型</text><text>状态</text><text>支付方式</text>
				</view>
				<view class="item" v-for="(item,index) in diff_list" :key="index">
					<view class="top">
						<view class="price">￥{{item.pay_price}}</view>
						<view>{{item.make_type_text}}</view>
						<view><text>{{item.state_text}}</text></view>
						<view v-if="item.make_type == '1' && item.pay_status == '0'">
							<view v-if="orderData.pay_status =='1' && orderData.order_state != '7'">
								<navigator open-type="navigate" class="go_pay_diff" :url="'/pages/jewel/order/order_diff?diff_id=' + item.id">去补差价</navigator>
							</view>
							<view class="" v-else>
								<view v-if="orderData.pay_status !='1'">
									{{item.pay_status_text}}
								</view>
								<view v-else>
									订单已取消
								</view>
							</view>
						</view>
						<view v-else-if="item.make_type != '2'">
							{{item.pay_way_text}}
						</view>
						
					</view>
					<view class="time">创建时间：{{item.createtime_text}}</view>
				</view>
			</view>
		</view>
		
		<view class="common">
			<view class="name">商品应付金额</view>
			<view class="info">¥{{orderData.shop_price * orderData.buy_num}}</view>
		</view>
		<view class="common">
			<view class="name">已支付{{orderData.shop_price != orderData.pay_amount && orderData.is_daiyan_zone == 0?'订金':''}}</view>
			<view class="info">¥{{orderData.pay_amount}}</view>
		</view>
		<!-- <view class="common">
			<view class="name">流量抵扣</view>
			<view class="info">¥{{orderData.traffic}}</view>
		</view> -->
		<view class="common" v-if="orderData.is_daiyan_zone == 1">
			<view class="name">优惠券抵扣</view>
			<view class="info">¥{{orderData.deduct_money}}</view>
		</view>
		<view class="common">
			<view class="name">支付状态</view>
			<view class="info">
				<view v-if="orderData.pay_status == 1">已付款</view>
				<view v-else>未付款</view>
			</view>
		</view>
		<view class="common" v-if="orderData.pay_status == 1">
			<view class="name">支付方式</view>
			<view class="info">
				{{orderData.pay_way_text}}
			</view>
		</view>
		<view class="common" v-if="orderData.pay_status == 1">
			<view class="name">订单状态</view>
			<view class="info">
				<view v-if="orderData.pay_status == 1">
					{{orderData.order_state_text}}
				</view>
				<view v-else>未支付</view>
			</view>
		</view>
		<view class="order-time-box">
			<view class="">订单编号：{{orderData.order_no}}</view>
			<view class="">下单时间：{{orderData.create_time}}</view>
			<view class="" v-if="orderData.expressname">快递公司：{{orderData.expressname}}</view>
			<view class="" v-if="orderData.expressID">快递单号：{{orderData.expressID}}</view>
			<view class="" v-if="orderData.pay_status == 1 && orderData.order_state >= 3 && orderData.order_state <= 4">发货时间：{{orderData.senddate}}</view>
			<view class="" v-if="orderData.pay_status == 1 && orderData.order_state == 5">成交时间：{{orderData.senddate}}</view>
		</view>
		
		<view class="footer">
			<view class="vip_remark" v-if="orderData.is_vip_zone == 1">{{orderData.vip_remark}}</view>
			<view class="text" v-if="orderData.order_state == 7">订单已取消</view>
			<view class="btn" v-if="orderData.pay_status == 0 && orderData.order_state != 7" @tap="go_pay(orderData.id)">去付款</view>
			<view class="btn" v-if="orderData.pay_status == 1 && orderData.order_state == 3" @tap="finish_order(orderData.id)">确认收货</view>
			<view class="btn" v-if="orderData.vip_button == 1" @tap="showVipZone">珠宝津贴</view>
		</view>
		<view class="redirect_index"  :class="isShowIndex ? 'show' : ''">
			<view class="icon" @tap="leftTan"><image src="../../../static/icons/jewel/index_arrow.png"></image></view>
			<image class="index" src="../../../static/icons/jewel/index_icon.png"></image>
			<text class="text" @tap="redirect_index">首页</text>
		</view>
		
		<view class="flick-menu-mask" :class="{'show_class': showDeital}" v-if="showDeital"></view>
		<view class="tenday-content" v-if="showDeital">
			<view class="tenday-title">
				<text>年月</text>
				<text>津贴</text>
				<text>状态</text>
			</view>
			<view class="item" v-for="(item,idx) in vipList" :key="idx">
				<text>{{item.send_time_text}}</text>
				<text>¥ {{item.money}}</text>
				<text>{{item.status_text}}</text>
			</view>
			<view class="deital-close" @tap="closeDeital">
				<close size="40" color="#ffffff"></close>
			</view>
		</view>
			
		
		<!-- 点击隐藏事件 hide_perfect -->
		<view name='infoPannel'>
		  <view class="flick-menu-mask" :class="show_class" @tap='hide_perfect'></view>
		  <view class="input_box" :class="show_class">
			<view class="title">完善身份证信息</view>
			<view class="input_div"><input placeholder='真实名称' @blur='log_nickname' type="text" class="nickname" confirm-type='done' :value="cardinfo?cardinfo.realname:''"/></view>
			<view class="input_div"><input placeholder='身份证' @blur='log_idcard' type="idcard" class="idcard" confirm-type='done' :value="cardinfo?cardinfo.idcard:''"/></view>
			<view class="msg">
			  为保障您享珠宝的合法权益，请输入真实资料
			</view>
			<view class="submit" @tap='save_idcard'>提交</view>
		  </view>
		</view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
	</view>
</template>

<script>
	import hl from '@/common/common_zb.js';
	export default {
		data() {
			return {
				orderData: [],	// 订单数据
				order_id: 0,	// 订单id
				addressData: [],	// 地址数据
				show_class: '',		// 显示填写身份证框
				nickname: '',	// 身份证名称
				idcard: '',	// 身份证号码
				cardinfo: [],	// 身份证信息
				bIsShowLoading: false,
				direction: true,
				diff_list: [],
				isShowIndex:false,
				isGoodsTpye: hl.isGoodsTpye(),
				showDeital: false,
				vipList:[],
				shop_info:{}
			}
		},
		onLoad({order_id}) {
			let that = this;
			that.order_id = order_id;
			this.get_load(order_id);
		},
		methods: {
			redirect_index(){
				uni.switchTab({
					url: '/pages/jewel/index/index'
				})
			},
			leftTan(){
				this.isShowIndex = !this.isShowIndex
			},
			get_load(order_id){
				let that = this;
				that.bIsShowLoading = true;
				hl.post('order/get_order_detail', {order_id: order_id}, true,function (res){
					let resdata = res.data;
					if(resdata.code == '-1') {
						hl.showToast(resdata.msg, 1000);
						setTimeout(function(){
							uni.navigateBack();
						}, 1000)
					}else{
						that.orderData = resdata.data;
						that.shop_info = that.orderData.seller_info
						that.diff_list = that.orderData.order_diff;
						that.addressData = resdata.data.addressData;
						that.cardinfo = resdata.data.cardinfo;
						if(that.cardinfo) {
							that.idcard = resdata.data.cardinfo.idcard;
							that.realname = resdata.data.cardinfo.realname;
						}
					}
					that.bIsShowLoading = false;
				})
			},
			// 去珠宝详情页
			goods_detail(goods_id){
				uni.navigateTo({
					url: '/pages/jewel/goods/show?goods_id=' + goods_id
				})
			},
			// 去支付
			go_pay(order_id){
				uni.navigateTo({
					url: '/pages/jewel/order/orderinfo?order_id=' + order_id
				})
			},
			// 确认收货
			finish_order(order_id){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定收到货了吗？',
					success: function (res) {
						if (res.confirm) {
							that.bIsShowLoading = true;
							hl.post('order/finish_order', {order_id: order_id}, true,function (res){
								let resdata = res.data;
								hl.showToast(resdata.msg, 1500);
								that.bIsShowLoading = false;
								that.get_load(order_id);
							})
						}
					}
				});
			},
			// 显示完善身份证框
			idcard_perfect(){
				this.show_class = 'show_class';
			},
			hide_perfect(){
				this.show_class = '';
			},
			// 记录真实名称
			log_nickname(e){
				this.nickname = e.target.value;
			},
			// 记录身份证号码
			log_idcard(e){
				this.idcard = e.target.value;
			},
			// 保存身份证信息
			save_idcard(){
				let that = this;
				let data = {order_id: this.order_id, idcard: this.idcard, nickname: this.nickname};
				hl.post('order/insert_order_user_data', data, true, function(res){
					let resdata = res.data;
					setTimeout(function(){
						if(resdata.code != '-1') {
							that.hide_perfect();
						}
					}, 1000);
					hl.showToast(resdata.msg);
				})
			},
			// 申请售后
			apply(order_id){
				uni.navigateTo({
					url: '/pages/jewel/order/order_apply?order_id=' + order_id
				})
			},
			toggle() {
				this.direction = !this.direction
			},
			showVipZone(){
				let that = this
				that.showDeital = true
				hl.post('Order/order_vip_zone', {order_no: that.orderData.order_no}, true,function (res){
					if(res.data.code == 0){
						that.vipList = res.data.data
					}
				})
			},
			closeDeital(){
				this.showDeital = false
			},
			makePhoneCall(){
				uni.makePhoneCall({
				    phoneNumber: this.orderData.seller_info.mobile //仅为示例
				});
			}
		}
	}
</script>

<style>
image{
	width: 100%;
	height: 100%;
}
.content{
	padding-bottom: 100rpx;
}
.mb20{
	border-bottom: 20rpx solid #f6f6f6;
}
.font-color-hs {
	color: #999;
}
.lease-now {
	color: #666;
}
.addr-box {
	height: 100%;
	width: 100%;
	border-top: 1rpx solid #ececec;
}
.addr-content {
	overflow: hidden;
	display: flex;
	align-items: center;
}
.addr-icon{
	width: 29rpx;
	height: 39rpx;
	margin-left: 48rpx;
	margin-right: 22rpx;
}
.addr-list {
	font-size: 30rpx;
	width: 610rpx;
	padding: 20upx 0;
}
.addr-info {
	font-size: 26rpx;
	color: #7f7f7f;
	line-height: 36rpx;
	margin-top: 5rpx;
}
.good-box {
	height: auto;
	width: 100%;
	overflow: hidden;
}
.common {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 26rpx 30rpx;
	border-bottom: 1px solid #e0e0e0;
}
.common .name{
	color: #3d3d3d;
	font-size: 26rpx;
}
.common .info{
	color: #8c8c8c;
	font-size: 26rpx;
}
.order-time-box{
	padding: 30rpx;
}
.order-time-box view{
	color: #a0a0a0;
	font-size: 26rpx;
	line-height: 50rpx;
}
.com-name {
	color: #1a1a1a;
	font-size: 28rpx;
}
.content-box {
	padding: 0 30rpx;
	font-size: 24rpx;
	display: flex;
	justify-content: space-between;
}

.detail-com {
	height: 62rpx;
	overflow: hidden;
	color: #666;
}
.detail-com view {
	height: 62rpx;
	line-height: 80rpx;
}
.com-contact image {
	width: 36rpx;
	height: 36rpx;
	display: inline-block;
	vertical-align: middle;
	margin-top: -6rpx;
	margin-right: 16rpx;
}
.good {
	width: 100%;
	overflow: hidden;
	border-top: 1px solid #f0f0f0;
	padding-top: 35rpx;
	padding-bottom: 20rpx;
}
.lease-info{
	display: flex;
	width: 525upx;
	justify-content: space-between;
	padding-top: 12upx;
}
.lease-img {
	width: 140rpx;
	height: 187rpx;
	border: 1px solid #d4d4d4;
}
.lease-title {
	height: 68rpx;
	width: 360rpx;
	overflow: hidden;
	line-height: 34rpx;
}
.lease-attr {
	height: 68rpx;
	overflow: hidden;
	font-size: 24rpx;
	margin-top: 10rpx;
}
.lease-price {
	text-align: right;
	font-size: 26rpx;
}
.lease-btns{
	display: flex;
	justify-content: flex-end;
	padding-top: 5rpx;
}
.lease-btns .btn{
	line-height: 42rpx;
	padding: 0 12rpx;
	border-radius: 4px;
	border: 1px solid #1a1a1a;
	margin-left: 12rpx;
}
.redirect_index{
	position: fixed;
	right: -176rpx;
	height: 73rpx;
	bottom: 177rpx;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	border-top: 1px solid #828282;
	border-bottom: 1px solid #828282;
	width: 247rpx;
	border-radius: 6px 0 0 6px;
	overflow: hidden;
}
.redirect_index.show{
	right: 0 !important;
}
.redirect_index.show .icon{
	transform: rotateY(180deg);
}
.redirect_index .icon{
	width: 70rpx;
	background: #828282;
	height: 73rpx;
	text-align: center;
}
.redirect_index .icon image{
	width: 17rpx;
	height: 31rpx;
	display: inline-block;
	vertical-align: middle;
	margin-top: 10rpx;
}
.redirect_index .index{
	width: 37rpx;
	height: 39rpx;
	margin-left: 35rpx;
	margin-right: 15rpx;
}
.redirect_index .text{
	color: #444444;
	font-size: 28rpx;
}
.footer {
	width: 100%;
	overflow: hidden;
	border-top: 1px solid #e6e6e6;
	font-size: 28rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: #ffffff;
}
.footer .btn{
	width: 247rpx;
	text-align: center;
	color: #ffffff;
	height: 98rpx;
	line-height: 98rpx;
	background: #ca4f64;
	font-size: 30rpx;
}
.footer .text{
	height: 98rpx;
	line-height: 98rpx;
	font-size: 26rpx;
	padding-right: 30rpx;
}
.contact {
	background: none !important;
	font-size: 28rpx;
	color: #666;
	line-height: auto;
}
.contact::after {
	content: none;
}

.flick-menu-mask {
    width: 100%;
    height: 120%;
    min-height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.5);
    z-index: 200;
    display: none
}
.input_box {
    background: #fff;
    z-index: 999;
    height: 430rpx;
    width: 80%;
    margin: 0 auto;
    position: absolute;
    top: 25%;
    left: 10%;
    border-radius: 4rpx;
    font-size: 26rpx;
    display: none
}
.show_class{
  display: block
}
.input_box input {
    height: 60rpx;
    border-radius: 4rpx;
    border: 1px solid #ccc;
    margin-bottom: 20rpx;
    padding-left: 18rpx;
}
.title {
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
    margin-bottom: 36rpx;
    border-bottom: 1rpx solid #eee
}
.input_div {
    width: 90%;
    margin: 0 auto;
}
.input_div .view-span {
    margin-right: 20rpx;
    color: #666;
    display: inline-block
}
.msg {
    width: 100%;
    font-size: 22rpx;
    clear: both;
    position: absolute;
    bottom: 80rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: #fff6e8;
    overflow: hidden;
    border-top: 2rpx solid #f2ddbc;
    text-align: center;
    color: #666;
}
.submit {
    width: 100%;
    height: 80rpx;
    background: #A40B1D;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    position: absolute;
    bottom: 0;
}
.cj_cont{
	margin-bottom: 20upx;
}
.cj_cont .cj_title{
	background: #FFFFFF;
	font-size: 26upx;
	color: #626262;
	font-weight: bold;
	padding: 28upx 38upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cj_cont .nav{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.cj_cont .nav text{
	flex: 1;
	color: #7F7F7F;
	font-size: 24upx;
	line-height: 62upx;
}
.cj_cont .item{
	background: #FFFFFF;
	margin-bottom: 10upx;
	padding-bottom: 20upx;
}
.cj_cont .item .top{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 90upx;
}
.cj_cont .item .top view{
	flex: 1;
	color: #7f7f7f;
	font-size: 24upx;
}
.cj_cont .item .top .price{
	color: #ee4242;
	font-size: 30upx;
	font-weight: bold;
}
.cj_cont .item .time{
	width: 710upx;
	height: 50upx;
	line-height: 50upx;
	color: #7f7f7f;
	font-size: 24upx;
	text-align: center;
	background: #f5f5f5;
	margin: 0 auto;
}
.cj_cont .item .go_pay_diff{
	width: 115upx;
	height: 45upx;
	background: #fd6361;
	text-align: center;
	color: #FFFFFF;
	font-size: 22upx;
	margin: 0 auto;
	border-radius: 10upx;
	line-height: 45upx;
	font-size: 22upx;
	display:inline-block;
}
.vip_remark{
	padding: 10rpx 20rpx;
	font-size: 28rpx;
}

.deital-close{
	padding: 5px;
	border-radius: 100px;
	border: 3px solid #fff;
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
}
.tenday-content{
	transition: all .3s;
	width: 600rpx;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: #FFFFFF;
	border-radius: 5px;
	z-index: 999;
}
.tenday-content .tenday-title{
	display: flex;
	align-items: center;
	padding-bottom: 20upx;
	padding-top: 20rpx;
	height: 40upx;
}
.tenday-content .tenday-title text{
	color: #353535;
	font-size: 34upx;
}
.tenday-content .item{
	display: flex;
	align-items: center;
	height: 50upx;
	line-height: 50upx;
}
.tenday-content .item:nth-child(2n){
	background: #f7f7f7;
}
.tenday-content text{
	font-size: 32upx;
	text-align: center;
	color: #828080;
	width: 33.33%;
}
.tenday-content .item text{
	font-size: 28upx;
	color: #818181;
	flex: 1;
}
</style>
